<template>
    <div class="menu_box">
        <div class="menu_scroll">
            <el-menu  class="el-menu-vertical-demo menu_item" :default-active="active"
                     background-color="#545c64"
                     text-color="#fff"
                     active-text-color="#ffd04b"
                     :collapse="isCollapse">
                <my-menu-item :permission="permission" :num="'app'"></my-menu-item>
            </el-menu>
        </div>
    </div>
</template>
<script>
    import MyMenuItem from "@/components/menu/MenuItem";
    export default {
        name:'MenuBox',
        computed:{
            active(){
                console.log( this.$route.path)
                return this.$route.path
            }
        },
        props:{
            permission:{},
        },
        data(){
            return{
                isCollapse:false
            }
        },
        methods:{

        },
        components:{
            MyMenuItem
        },
        mounted() {
            console.log(this.permission)
        }
    }
</script>
<style lang="less">
    .menu_box{
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
        background-color: #545c64;
        .menu_scroll{
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: -17px;
            overflow-x: hidden;
            overflow-y: scroll;
        }
        .menu_item{
            margin-left: -17px;
        }
    }
</style>
